<template >
	<div class="contain" >
		<div class="contain-header">
			<el-breadcrumb  separator="/">
				<el-breadcrumb-item>仓储管理</el-breadcrumb-item>
				<el-breadcrumb-item>发货管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="deliveryManagement-body">
			<div class="body-header">
				<div class="header-box" :class="isActive === 3? 'active' : ''" @click="changeTable(3)">待拣货</div>
				<div class="header-box"  :class="isActive === 4? 'active' : ''"  @click="changeTable(4)">待发货</div>
			</div>
			<div class="body-box">
				<el-button v-if="isActive === 3" type="info" size="small" @click="openDan">查看并打印拣货单</el-button>
				<el-button v-if="isActive === 3"  type="primary" size="small" @click="openCode">查看并打印货件标签</el-button>
				<el-button v-if="isActive === 4"  type="primary" size="small" @click="openXiang">查看并打印箱单</el-button>
			</div>
			<div class="body-table">
				<el-table
						:data="tableData"
						stripe
						style="width: 100%">
					<el-table-column
							align="center"
							prop="order.orderNum"
							label="订单编号">
					</el-table-column>
					<el-table-column
							align="center"
							prop="order.createTime"
							show-overflow-tooltip
							label="下单时间">
					</el-table-column>
					<el-table-column
							align="center"
							prop="order.good.name"
							show-overflow-tooltip
							label="商品名称">
					</el-table-column>
					<el-table-column
							align="center"
							prop="order.good.totalNum"
							label="商品数量">
					</el-table-column>
					<el-table-column
							align="center"
							label="类型">
						<template>
							散货出库
						</template>
					</el-table-column>
					<el-table-column
							align="center"
							prop="order.receiptName"
							label="收件人姓名">
					</el-table-column>
					<el-table-column
							align="center"
							prop="order.receiptAddress"
							show-overflow-tooltip
							label="收件人地址">
					</el-table-column>
					<el-table-column
							align="center"
							prop="order.receiptPhone"
							label="收件人电话">
					</el-table-column>
					<el-table-column
							align="center"
							label="收件人国家">
						<template slot-scope="scope">
							{{scope.row.order.receiptCountry === 1? '美国' : scope.row.order.receiptCountry  === 2? '韩国' : scope.row.order.receiptCountry === 3 ?'日本': scope.row.order.receiptCountry ===4 ? '新加坡' : '澳大利亚' }}
						</template>
					</el-table-column>
					<el-table-column
							align="center"
							label="订单状态">
						<template slot-scope="scope">
							{{scope.row.order.orderStatus === 1? '待审核' : scope.row.order.orderStatus === 2? '待提交' : scope.row.order.orderStatus === 3? '待拣货' : scope.row.order.orderStatus === 4? '待发货' : scope.row.order.orderStatus === 5? '已发货' :  '已完成'}}
						</template>
					</el-table-column>
					<el-table-column
							align="center"
							width="180px"
							label="操作">
						<template slot-scope="scope">
							<el-button v-if="scope.row.sendStatus === 3" type="primary" @click="picking(scope.row.id)" size="mini">拣 货</el-button>
							<el-button v-if="scope.row.sendStatus === 4" type="primary" size="mini" @click="send(scope.row.id)">发 货</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="body-page">
				<el-pagination
						background
						layout="prev, pager, next"
						@current-change="handleCurrentChange"
						:page-size="pageData.pageSize"
						:total="total">
				</el-pagination>
			</div>
		</div>
		
		<el-dialog
				title="拣货单"
				:visible.sync="showDialog"
				width="30%"
				center
				>
			<div style="width: 100%;">
				<div style="width: 100%;height: 80px;display: flex;justify-content: space-between;align-items: center">
					<img src = "../assets/images/phCode.png" style="width: 220px;height: 100%" alt = "" >
					<div style=" display: flex;flex-direction: column;align-items: flex-end;justify-content: space-around; font-size: 12px">
						<i>00012</i>
						<i>库区:跨境电商仓库</i>
					</div>
				</div>
				<div style="width: 100%;height: 60px;display: flex;justify-content: space-between;align-items: center;margin-top: 10px">
					<div style="height: 100%; display: flex;flex-direction: column;align-items: flex-start;justify-content: space-around; font-size: 12px">
						<i>商品品种:3</i>
						<i>商品数量:3</i>
						<i>箱型汇总:FL211111*3个</i>
					</div>
					<div style="height: 100%; display: flex;flex-direction: column;align-items: flex-start;justify-content: space-around; font-size: 12px">
						<i>店铺名称:Y-1323456745</i>
						<i>物流商:</i>
					</div>
				</div>
				<div style="width: 100%;margin-top: 20px">
					<el-table
							:data="dialogData"
							border
							style="width: 100%">
						<el-table-column
								type="index"
								label="序号"
								align="center"
								width="50">
						</el-table-column>
						<el-table-column
								prop="wei"
								label="库位"
								align="center"
								>
						</el-table-column>
						<el-table-column
								prop="code"
								label="条码"
								align="center"
								show-overflow-tooltip
								>
						</el-table-column>
						<el-table-column
								prop="name"
								label="货品名称"
								align="center"
								show-overflow-tooltip
								>
						</el-table-column>
						<el-table-column
								prop="num"
								label="数量"
								align="center"
								>
						</el-table-column>
						<el-table-column
								prop="ying"
								label="指引"
								align="center"
								>
						</el-table-column>
					</el-table>
				</div>
				
			</div>
			<span slot="footer" class="dialog-footer">
    
    <el-button size="small" @click="showDialog = false">关 闭</el-button>
  </span>
		</el-dialog>
		<el-dialog
				:visible.sync="showDialog2"
				width="30%"
				center
		>
			<div style="width: 100%;display: flex;flex-direction: column;align-items: center;justify-content: space-around">
				<img src = "../assets/images/phCode.png" style="width: 80%;height: 100px;margin-bottom: 20px" alt = "" >
				<img src = "../assets/images/phCode.png" style="width: 80%;height: 100px;margin-bottom: 20px" alt = "" >
				<img src = "../assets/images/phCode.png" style="width: 80%;height: 100px;" alt = "" >
			
			</div>
			<span slot="footer" class="dialog-footer">
    
    <el-button size="small" @click="showDialog2 = false">关 闭</el-button>
  </span>
		</el-dialog>
		<el-dialog
				title="装箱单"
				:visible.sync="showDialog1"
				width="30%"
				center
		>
			<div style="width: 100%;">
				<div style="width: 100%;height: 80px;display: flex;justify-content: space-between;align-items: center">
					<img src = "../assets/images/phCode.png" style="width: 220px;height: 100%" alt = "" >
					<div style=" display: flex;flex-direction: column;align-items: flex-end;justify-content: space-around; font-size: 12px">
						<i>00012</i>
						<i>库区:跨境电商仓库</i>
					</div>
				</div>
				<div style="width: 100%;height: 60px;display: flex;justify-content: space-between;align-items: center;margin-top: 10px">
					<div style="height: 100%; display: flex;flex-direction: column;align-items: flex-start;justify-content: space-around; font-size: 12px">
						<i>商品品种:3</i>
						<i>商品数量:3</i>
						<i>箱型汇总:FL211111*3个</i>
					</div>
					<div style="height: 100%; display: flex;flex-direction: column;align-items: flex-start;justify-content: space-around; font-size: 12px">
						<i>店铺名称:Y-1323456745</i>
						<i>物流商:</i>
					</div>
				</div>
				<div style="width: 100%;margin-top: 20px">
					<el-table
							:data="dialogData"
							border
							style="width: 100%">
						<el-table-column
								type="index"
								label="序号"
								align="center"
								width="50">
						</el-table-column>
						<el-table-column
								prop="wei"
								label="库位"
								align="center"
						>
						</el-table-column>
						<el-table-column
								prop="code"
								label="条码"
								align="center"
								show-overflow-tooltip
						>
						</el-table-column>
						<el-table-column
								prop="name"
								label="货品名称"
								align="center"
								show-overflow-tooltip
						>
						</el-table-column>
						<el-table-column
								prop="num"
								label="数量"
								align="center"
						>
						</el-table-column>
						<el-table-column
								prop="ying"
								label="指引"
								align="center"
						>
						</el-table-column>
					</el-table>
				</div>
			
			</div>
			<span slot="footer" class="dialog-footer">
    
    <el-button size="small" @click="showDialog1 = false">关 闭</el-button>
  </span>
		</el-dialog>
	</div>
</template >

<script >
	import { deliveryPage, deliveryPicking, deliverySend  } from "../api/storageModules";
    export default {
        name: "deliveryManagement",
        data(){
            return{
                showDialog:false,
                showDialog2:false,
                showDialog1:false,
                isActive:3,
                tableData: [],
				pageData:{
                    pageIndex: 1,
                    pageSize: 10,
                    sendStatus: 3
				},
				total:null,
                dialogData: [
					{
					    wei:'A1-01',
						code:'12124614',
						name:'手提袋4455,SigBrkeCryllIm/Khaki/Saddle2',
						num:1,
						ying:'[01] x 1'
					},
                    {
                        wei:'A1-01',
                        code:'1965155',
                        name:'Seidensticker 女式衬衫',
                        num:1,
                        ying:'[02] x 1'
                    },
                    {
                        wei:'A1-01',
                        code:'1584625',
                        name:'Loewe 中性成人 VLWA23M520T94 光学镜框',
                        num:1,
                        ying:'[03] x 1'
                    }
				]
            }
        },
		mounted() {
            this.getPage()
        },
        methods:{
            openDan(){
                this.showDialog = true
                console.log(JSON.stringify({
                    id: 100005,
                    flag: true
                }))
			},
			openCode(){
                this.showDialog2 = true
                console.log(JSON.stringify({
                    id: 100006,
                    flag: true
                }))
			},
            openXiang(){
                this.showDialog1 = true
                console.log(JSON.stringify({
                    id: 100007,
                    flag: true
                }))
			},
			// 查询分页
            async getPage(){
                const { data } = await deliveryPage(this.pageData)
                if (data.code === 200) {
                    this.tableData = data.data.data
                    this.total = data.data.total
                }
            },
            //切换tab
            changeTable(val){
                this.isActive = val
                if (val === 3) {
                    this.pageData.sendStatus = val
                    this.getPage()
                } else {
                    this.pageData.sendStatus = val
                    this.getPage()
                }
            },
            //分页
            handleCurrentChange(val) {
                this.pageData.pageIndex = val
                this.getPage()
            },
			//拣货
             picking(id){
                 this.$confirm('确定拣货,是否继续?', '提示', {
                     confirmButtonText:'确定',
                     cancelButtonText:'取消',
                     type:'warning'
                 }).then(() => {
                     deliveryPicking(id).then(res => {
                         if (res.data.code === 200) {
                             this.$message.success(res.data.message)
                             this.getPage()
                         }
                     })
                 }).catch(()=>{
                     this.$message({
                         type:'info',
                         message:'撤销拣货!'
                     })
                 })
			},
			//发货
             send(id){
                this.$confirm('确定发货,是否继续?', '提示', {
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                }).then(() => {
                    deliverySend(id).then(res => {
                        if (res.data.code === 200) {
                            this.$message.success(res.data.message)
                            this.getPage()
                        }
                    })
                }).catch(()=>{
                    this.$message({
                        type:'info',
                        message:'撤销发货!'
                    })
                })
            }
        }
    }
</script >

<style scoped lang="less">
	.deliveryManagement-body{
		width: 100%;
		height: calc(100% - 50px);
		background-color: #ffffff;
		.body-header{
			width: 100%;
			height: 50px;
			display: flex;
			.active{
				background-color: rgb(0,150,136);
				color: #ffffff;
			}
			.header-box{
				width: 150px;
				height: 40px;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #ccc;
				cursor: pointer;
				&:nth-child(1){
					border-right: none;
				}
			}
		}
		.body-box{
			width: 100%;
			height: 50px;
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}
		.body-table {
			width: 100%;
			max-height: calc(100% - 150px);
		}
		.body-page{
			width: 100%;
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style >
